<template>
  <div >
    <main role="main">

      <section class="jumbotron text-center">
        <div class="container">
          <h1>Cool课网</h1>
          <p class="lead text-muted">IT技能学习平台。Cool课网程涉及JAVA、前端、Python、大数据等60类主流技术语言,覆盖了面试就业、职业成长、自我提升等需求场景,帮助用户实现从技能提升到岗位提升的能力闭</p>
          <p>
            <router-link to="/list" class="btn btn-primary my-3">点击查看全部课程</router-link>
          </p>
        </div>
      </section>

      <div class="album py-5 bg-light">
        <div class="container">
          <div class="title1">最新课程</div>
          <div class="row">
            <div class="col-md-4 course-card" v-for="course in news" v-on:click="toDetail(course)">
               <the-course v-bind:course="course"></the-course>
            </div>
          </div>
          <hr/>
          <div class="title2">好课推荐</div>
          <div class="row">
            <div class="col-md-4 course-card" v-for="course in news" v-on:click="toDetail(course)">
              <!--<div class="card mb-4 shadow-sm">-->
                <!--<img v-bind:src="course.image" class="img-fluid"/>-->
                <!--<div class="card-body">-->
                  <!--<h4>{{course.name}}</h4>-->
                  <!--<p class="card-text">{{course.summary}}</p>-->
                  <!--<div class="d-flex justify-content-between align-items-center">-->
                    <!--<div class="btn-group">-->
                      <!--<button type="button" class="btn btn-sm btn-outline-secondary">课程详情</button>-->
                    <!--</div>-->
                    <!--<small class="text-muted">{{course.price}}</small>-->
                    <!--<small class="text-muted">123</small>-->
                    <!--<span class="badge badge-primary">Primary</span>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
               <the-course v-bind:course="course"></the-course>
            </div>
          </div>
        </div>
      </div>

    </main>
  </div>
</template>

<script>

import TheCourse from '../components/the-course'
import router from "@/router";
export default {
  name: 'index',
  components: {
      TheCourse
  },
  data: function () {
      return {
          news: [],
      }
  },
  mounted() {
      let _this = this;
      _this.listNew();
  },
  methods: {
      /**
       * 查询新上好课
       */
      listNew() {
          let _this = this;
          Loading.show();
          _this.$axios.get(process.env.VUE_APP_SERVER + '/business/web/course/list-new').then((response)=>{
              Loading.hide();
              console.log("查询新上好课结果：", response);
              let resp = response.data;
              if (resp.success) {
                  _this.news = resp.content;
              }
          }).catch((response)=>{
              console.log("error：", response);
          })
      },
      toDetail(course){
          router.push('/detail?id=' + course.id)
      }
  }
}
</script>

<style scoped>
  .title1{
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #fafafa;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    letter-spacing: 0;
  }
  .title2{
    margin-bottom: 2rem;
    color: transparent;
    -webkit-text-stroke: 1px black;
    letter-spacing: 0.04em;
    font-size: 2rem;
  }
  .course-card{
    cursor: pointer;
  }

</style>
